<div
  class="po-field-container-bottom po-footer-group"
  [class.po-field-container-bottom-disabled]="disabled"
  [attr.aria-label]="errorPattern && errorLimit ? errorPattern : null"
  [attr.p-size]="size"
  role="alert"
  aria-live="assertive"
  tabindex="-1"
>
  @if (errorPattern) {
    <div class="po-field-container-bottom-text-error">
      <po-icon p-icon="an an-warning-circle"></po-icon>
      <span
        class="po-field-error-message"
        [class.po-field-error-limit]="errorLimit"
        [p-tooltip]="errorLimit ? errorPattern : null"
        p-tooltip-position="top"
        [p-append-in-body]="appendBox"
      >
        {{ errorPattern }}
      </span>
    </div>
  }
  @if (!errorPattern && help) {
    <div class="po-field-container-bottom-help-text">
      @if (help) {
        <span>
          {{ help }}
        </span>
      }
    </div>
  }
  @if (poHelperComponent()) {
    <po-helper
      #helperEl
      [p-size]="size"
      [p-helper]="poHelperComponent()"
      [p-disabled]="disabled"
      [p-append-in-body]="appendBox"
    >
    </po-helper>
  }
</div>
